<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view :style="{backgroundColor: themeVars.pageBackgroundColor,padding: themeVars.pagePadding }">
      <nut-cell title="头像" is-link center>
        <template #desc>
          <button class="reset_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <nut-avatar size="small">
              <img
                  :src="userForm.avatar"/>
            </nut-avatar>
          </button>
        </template>
      </nut-cell>
      <nut-cell title="昵称" is-link>
        <template #desc>
<!--          type="nickname"-->
          <input name="nickname" v-model="userForm.nickname"
                 placeholder="请输入昵称" />
        </template>
      </nut-cell>
      <view class="fixed-bottom">
        <nut-button type="primary" style="width: 200px" @click="submit">保存</nut-button>
      </view>

    </view>

  </nut-config-provider>
</template>

<script setup>
import {ref} from 'vue';
import useTheme from "../../../hooks/useTheme";
import Taro, {useDidShow} from '@tarojs/taro'
import getBaseUrl from "../../../network/baseUrl";
import {Api} from "../../../api/dev";
import {getLoginUser, userUpdateUser} from "../../../api/login";
import {cloneDeep} from "lodash";

const {theme, themeVars} = useTheme()

const token = Taro.getStorageSync('token')
const baseUrl = getBaseUrl()
const returnUrl = Api.fileUploadDynamicReturnUrl

 const userForm = ref({});


const submit = () => {
   const userJson = cloneDeep(userForm.value)
  console.log("提交用户数据", userJson);
  userUpdateUser(userJson).then(res => {
    Taro.showToast({title: res.msg, icon: 'success', duration: 1500,});
    getUserInfo()
  }).finally(() => {
    Taro.hideLoading()
  })
}

const onChooseAvatar = (e) => {
  console.log(e.detail)
  const uploadTask = Taro.uploadFile({
    url: baseUrl + returnUrl,
    filePath: e.detail.avatarUrl,
    name: "file",
    header: {
      "Content-Type": "multipart/form-data", //form-data格式
      'Accept': 'application/json',
      "Token": token
    },
    success: (res) => {
      const data = JSON.parse(res.data);
      if (data.code == 200) {
        const avatar = data.data;
        // updateUser({avatar:avatar});
        userForm.value.avatar = avatar
      } else {
        Taro.showToast({title: data.msg, icon: 'error', duration: 1500,});
      }
    },


  })
  uploadTask.progress((res) => {
    console.log('上传进度', res.progress)
    console.log('已经上传的数据长度', res.totalBytesSent)
    console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
  })

}


const getUserInfo = () => {
  getLoginUser().then(res => {
    if (res.code == 200) {
      Taro.setStorageSync('userInfo', JSON.stringify(res.data));

      userForm.value = res.data
    }
  })
}

useDidShow(() => {
  getUserInfo()

})


</script>

<style>
.reset_btn {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  font-size: 1em;
  background-color: transparent;
  display: inline-block;

}

.reset_btn::after {
  border: none;
}

.fixed-bottom {
  position: fixed;
  bottom: 30px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}


</style>